<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../css/element_2.4.7.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
</head>
<body>
<div id="app">
    <el-container class="wrapper"><!--布局容器-->
        <!--头部-->
        <el-header class="top clearfix"></el-header>

        <el-container>
            <!--侧边栏-->
            <el-aside class="slide" :class="top.isCollapse?'aside-auto':'aside-w200'"></el-aside>

            <el-container>
                <el-main v-if="main.main">
                    <!--主要内容-->
                    <div class="seach">
                        <el-col
                                :span="24"
                                class="seach-title justify-content">
                            <span>查询</span>
                        </el-col>
                        <!--ref与model要保持一致，表单数据对象-->
                        <el-form
                                class="clearfix"
                                 ref="main.main.form"
                                 :model="main.main.form"
                                 :inline="true"
                                 label-width="90px">

                            <el-form-item label="业务编号" prop="number">
                                <el-input
                                        v-model="main.main.form.number"
                                        :clearable="true"
                                        placeholder="请输入业务编号"></el-input>
                            </el-form-item>

                            <el-form-item label="产品名称" prop="product">
                                <el-select
                                        v-model="main.main.form.product"
                                        placeholder="请选择产品名称">
                                    <el-option
                                            v-for="item in main.main.form.productList"
                                            :label="item.label"
                                            :value="item.id"
                                            :key="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item class="block-none" prop="linkageOne"></el-form-item>
                            <!--为了实现清空,必须存在prop-->
                            <el-form-item label="选择联动" prop="linkageTwo" class="clearfix">
                                <el-select
                                        class="linkage"
                                        v-model="main.main.form.linkageOne"
                                        placeholder="请选择联动1"
                                        @change="methods('selectLinkage',main.main.form)">
                                    <!--获得的数据是value-->
                                    <el-option
                                            v-for="item in main.main.form.linkageOneList"
                                            :label="item.label"
                                            :value="item.id"
                                            :key="item.id">
                                    </el-option>
                                </el-select>
                                <span class="joint-mark">-</span>
                                <el-select
                                        class="linkage"
                                        v-model="main.main.form.linkageTwo"
                                        placeholder="请选择联动2">
                                    <el-option
                                            v-for="item in main.main.form.linkageTwoList"
                                            :label="item.label"
                                            :value="item.id"
                                            :key="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="选择日期" prop="date">
                                <el-date-picker
                                        type="date"
                                        v-model="main.main.form.date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item label="日期区间" prop="dateRange">
                                <el-date-picker
                                        v-model="main.main.form.dateRange"
                                        type="daterange"
                                        range-separator="-"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        class="seach-daterange">
                                </el-date-picker>
                            </el-form-item>

                            <el-form-item class="block-none" prop="dateTime1"></el-form-item>
                            <el-form-item label="日期时间" prop="dateTime2" class="clearfix">
                                <el-date-picker
                                        class="linkage"
                                        type="date"
                                        placeholder="选择日期"
                                        v-model="main.main.form.dateTime1">
                                </el-date-picker>
                                <span class="joint-mark">-</span>
                                <el-time-picker
                                        class="linkage"
                                        type="fixed-time"
                                        placeholder="选择时间"
                                        v-model="main.main.form.dateTime2">
                                </el-time-picker>
                            </el-form-item>

                            <el-form-item class="right">
                                <el-button type="primary" @click="methods('seachSubmit',main.main.form)">查询</el-button>
                                <el-button type="primary"><a class="block-level" href="#">新增</a></el-button>
                                <el-button @click="methods('seachEmpty','main.main.form')">清空</el-button>
                                <!--<el-button @click="resetForm('main.main.form')">清空</el-button>-->
                            </el-form-item>
                        </el-form>
                    </div>

                    <div class="table">
                        <el-table
                                :data="main.main.tableData"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    prop="date"
                                    label="日期"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="姓名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="address"
                                    label="地址">
                            </el-table-column>
                        </el-table>
                    </div>
                    <!--主要内容结束-->
                </el-main>

                <!--尾部-->
                <el-footer class="justify-content footer"></el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="../js/common/vue_2.5.17.js"></script>
<!-- import JavaScript -->
<script src="../js/common/element_2.4.7.js"></script>
<script src="../js/common/jquery-1.9.1.min.js"></script>
<!--公共头部，公共侧边栏，公共尾部-->
<script src="../js/common/common.js"></script>
<script>
    $(function(){
        // this.$set(this.data,'key',value)正确的语法格式
        vm.$set(vm.main,'main',{//主要内容的数据
            form:{
                number:'',
                product:'',
                productList:[
                    {
                        id:1,
                        label:"产品1"
                    },
                    {
                        id:2,
                        label:"产品2"
                    },
                    {
                        id:3,
                        label:"产品3"
                    },
                ],
                linkageOne:'',
                linkageTwo:'',
                linkageOneList:[
                    {
                        id:1,
                        label:"总公司"
                    },
                    {
                        id:2,
                        label:"分公司"
                    }
                ],
                linkageTwoList:[],
                date:'',
                dateRange:'',
                dateTime1:'',
                dateTime2:''
            },
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        });
        // 监听属性
        // vm.$watch('')
        //联动
        vm.$on('selectLinkage', function (data) {
            if(data.linkageOne==2){
                data.linkageTwoList = [
                    {
                        id:"1",
                        label:"分公司1"
                    },
                    {
                        id:"2",
                        label:"分公司2"
                    }
                ];
            }
            else if(data.linkageOne==1){
                data.linkageTwoList = [];
            }
            // vm.menuOpen();//外部调用vue内部方法
        });
        //提交搜索内容
        vm.$on('seachSubmit', function (data) {
            vm.$notify({
                title: '提交查询信息',
                message: '提交成功',
                duration: 0
            });
            // vm.menuOpen();//外部调用vue内部方法
        })
        //清空搜索内容
        vm.$on('seachEmpty', function (data) {
            console.log(data);
            vm.$refs[data].resetFields();
            // vm.methods('seachSubmit',vm.main);//外部调用vue内部自定义方法,执行当前页面的对应方法

        })
    })

</script>
</html>